<template>
  <div class="home">
    <div class="top">
      <!-- <i class="fa fa-search"></i> -->
      <!-- <input @focus="inputFn" type="text" placeholder="请输入" /> -->
      <van-search  @focus="inputFn" placeholder="请输入菜谱关键字" />
      <span @click="mycenterFn" class="fa fa-tencent-weibo"></span>
      <!-- <van-icon name="contact-o" /> -->
    </div>
    <!-- 轮播图 -->
    <swriper-view></swriper-view>
    <!-- 两行四列 编程式导航跳转-->
    <div class="MenuList">
      <ul>
        <li @click="jiachangcaiFn">
          <img src="../assets/jiachangcai.png" alt="" />
          <p>家常菜</p>
        </li>
        <li @click="xiafancaiFn">
          <img src="../assets/xiafancai.png" alt="" />
          <p>下饭菜</p>
        </li>
        <li @click="xiaochiFn">
          <img src="../assets/xiaochi.png" alt="" />
          <p>瘦身</p>
        </li>
        <li @click="soupFn">
          <img src="../assets/tang.png" alt="" />
          <p>粥</p>
        </li>
      </ul>
      <ul>
        <li @click="chinsesFn">
          <img src="../assets/zaocan.png" alt="" />
          <p>中国菜</p>
        </li>
        <li @click="danleiFn">
          <img src="../assets/liangcai.png" alt="" />
          <p>蛋类</p>
        </li>
        <li @click="zhushiFn">
          <img src="../assets/sushi.png" alt="" />
          <p>主食</p>
        </li>
        <li @click="kuaicanFn">
          <img src="../assets/yu.png" alt="" />
          <p>快餐</p>
        </li>
      </ul>
    </div>
    <!-- 推荐列表 -->
    <h5>推荐美食</h5>
    <div class="tuijian" v-if="this.$store.state.tuijianList.length != 0">
      <ul>
        <li @click="fooddetailFn(item.id)" v-for="item in this.$store.state.tuijianList" :key="item.id">
          <img :src="item.img" alt="" />
          <div>
            <span>{{ item.name }}</span>
            <p>
              <van-icon name="star-o" color="#B3B3B3" />
              <i>{{ item.vc }}</i>
            </p>
          </div>
        </li>
      </ul>
    </div>
    <div v-else class="loading">
      <img src="../assets/loading.gif" alt="" />
    </div>
    <div class="content"></div>
  </div>
</template>
<script>
import swriperView from "@/components/swriperView.vue";
import { Food_tuijian } from "../api/index";
export default {
  name: "HomeView",
  components: {
    swriperView,
  },
  data() {
    return {};
  },
  created() {
    this.getTuijianFn();
  },
  methods: {
    jiachangcaiFn() {
      this.$router.push({ path: "./public", query: {keyword:'家常菜'} });
    },
    xiafancaiFn() {
      this.$router.push({ path: "./public", query:  {keyword:'下饭菜'}});
    },
    xiaochiFn() {
      this.$router.push({ path: "./public", query:  {keyword:'瘦身'} });
    },
    soupFn() {
      this.$router.push({ path: "./public", query: {keyword:'粥'}});
    },
    chinsesFn() {
      this.$router.push({ path: "./public", query:  {keyword:'中国菜'} });
    },
    danleiFn() {
      this.$router.push({ path: "./public", query:  {keyword:'蛋类'} });
    },
    zhushiFn() {
      this.$router.push({ path: "./public", query:{keyword:'主食'} });
    },
    kuaicanFn() {
      this.$router.push({ path: "./public", query: {keyword:'快餐'} });
    },
    mycenterFn() {
      setTimeout(() => {
        this.$router.push({ path: "./mycenter" });
      }, 280);
    },
    inputFn() {
      setTimeout(() => {
        this.$router.push({ path: "./search" });
      }, 280);
    },
    async getTuijianFn() {
      await Food_tuijian().then((content) => {
        // console.log(content);
        let { state, result } = content;
        if (state == "success") {
          let { list } = result;
          // console.log(list);
          let filteredList = list.filter((item) => item.hasOwnProperty("r"));
          //  console.log(filteredList);
          let objs = filteredList.map((item) => ({
            id: item.r.id,
            img: item.r.img,
            vc: item.r.vc,
            radio: item.r.vfurl,
            collect: item.r.collect_users,
            name: item.r.stdname,
          }));
          // console.log('objs',objs);
          this.$store.state.tuijianList = objs;
          // console.log(this.$store.state.tuijianList);
        }
      });
    },
    fooddetailFn(id){
     this.$router.push({path:'./foodetail',query:{id}})
     console.log(id);
    }
  },
};
</script>
<style lang="less" scoped>
@import "../css/varaible.less";
.loading {
  text-align: center;

  img {
    margin-top: 10px;
    width: 150px;
    height: 150px;
  }
}
.content {
  padding-bottom: 70px; /* 假设底部导航栏的高度是70px */
}
.home {
  padding: 0 15px;
  .top {
    margin-top: 10px;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    i {
      position: absolute;
      font-size: 14px;
      left: 25px;
      top: 12px;
    }
    .van-search {
      width: 90%;
      height: 40px;
      border-radius: 20px;
      background-color: #f6f6f6;
      color: @textColor;
      font-size: 14px;
      // padding: 0 30px;
    }
  }
  .MenuList {
    margin-top: 20px;
    ul {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      li {
        text-align: center;
        p {
          margin-top: 5px;
          font-size: 12px;
          color: @textColor;
        }
        img {
          width: 50px;
          height: 50px;
        }
      }
    }
  }
  h5 {
    margin: 10px 0;
  }
  .tuijian {
    ul {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      li {
        // display: flex;
        font-size: 14px;
        div {
          text-align: center;
          span {
            // text-align: center;
            display: inline-block;
            width: 150px;
            white-space: nowrap; /* 确保文本在一行内显示 */
            overflow: hidden; /* 隐藏溢出的内容 */
            text-overflow: ellipsis; /* 使用省略号表示文本被截断 */
          }
          p {
            i {
              color: @color;
              padding-left: 10px;
            }
          }
        }
        img {
          width: 150px;
          height: 100px;
        }
      }
    }
  }
}
</style>

